<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <h1>详情页</h1>
</body>

</html>
<script>
    //如何获取?

    //1.获取浏览器中的地址

    //2.获取?后面的参数

    function getQueryString(params) {
        let url = location.href;//获取浏览器地址;

        //使用正则匹配出来url参数

        let reg = /(?<=\?).*/

        let r = url.match(reg);

        console.log(r)
        if (!r) { //表示没匹配到url参数
            console.error('没有匹配到url参数')
            return
        } else {

            //对参数进行解码
            r = decodeURI(r[0]);

            // console.log(r)

            if (params) {
                //如果用户传递了查询的参数的key,
                let result = r.indexOf(params);
                if (result === -1) { //传递了key 但是找不到 返回Null
                    return null
                }
                //继续处理
                let queryArr = r.split('&');

                //把数据变成对象
                let obj = {};
                queryArr.forEach(item => {
                    let itemArr = item.split('=');
                    obj[itemArr[0]] = itemArr[1]
                })
                return obj[params]
            } else { //没传参数 也返回null
                return null
            }
        }
    }

    let q = getQueryString('name');

</script>